<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
	<style>
		.half-border {
			position: relative;
			width: 200px;
			height: 100px;
			line-height: 100px;
			text-align: center;
		}

		.half-border::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			box-sizing: border-box;
			width: 200%;
			height: 200%;
			border-width: 1px;
			border-style: solid;
			border-color: red;
			border-radius: 10px;
			transform-origin: 0 0;
			transform: scale(0.5);
			/* z-index: 0; */
		}

		.border {
			width: 200px;
			height: 100px;
			margin-left: 20px;
			border: 1px solid red;
			border-radius: 10px;
			line-height: 100px;
			text-align: center;
		}

		.out-border-box {
			width: 420px;
			height: 50px;
			padding: 6px;
			margin-top: 20px;
			box-sizing: border-box;
			line-height: 100px;
			border-radius: 24px;
			background-image: linear-gradient(to left, rgba(0, 199, 119, 0) 0%, rgba(0, 199, 119, 0.2) 100%);
		}

		.inner-content-box {
			width: 100%;
			height: 100%;
			color: #333333;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-left: 20px;
			border-radius: 24px;
			background: #fff;
			background-image: linear-gradient(to left, rgba(2, 220, 136, 0) 0%, rgba(168, 255, 223, 0.15) 100%);
		}

		.half-border-bottom {
			width: 200px;
			height: 100px;
			margin-top: 20px;
			position: relative;
		}

		.half-border-bottom:before {
			content: "";
			position: absolute;
			box-sizing: border-box;
			width: 200%;
			bottom: 0;
			border-bottom: 1px solid red;
			-webkit-transform-origin: 0 0;
			-webkit-transform: scale(0.5, 0.5);
			transform-origin: 0 0;
			transform: scale(0.5, 0.5);
		}

		.border-bottom {
			width: 200px;
			height: 100px;
			margin-top: 20px;
			border-bottom: 1px solid red;
			margin-left: 20px;
		}
	</style>
</head>
<body>
	<div style="display: flex;">
		<div class="half-border">
			0.5px边框
		</div>
		<div class="border">
			1px边框
		</div>
	</div>
	<div style="display: flex;">
		<div class="half-border-bottom">
			0.5px边框
		</div>
		<div class="border-bottom">
			1px边框
		</div>
	</div>
	<div class="out-border-box">
		<div class="inner-content-box">
			渐变边框、渐变背景
		</div>
	</div>
</body>
